<template>
  <view class="container">
    <form class="form" @submit="submit">
      <view class="row">
        <text class="left">选择职业</text>
        <view class="right" @click="openPopup('work')">
          <view class="value">{{ info.work ? info.work : '请选择' }}</view>
          <image class="go" src="/static/images/go.png"></image>
        </view>
        <input type="text" name="work" :value="info.work" style="display: none">
      </view>
      <view class="row">
        <text class="left">姓名</text>
        <view class="right">
          <input type="text" class="value input" placeholder="请输入" name="username" :value="info.username" v-if="info.examine_status == 2 || !info.id" />
          <view class="value input" v-else>{{ info.username }}</view>
        </view>
      </view>
      <view class="row">
        <text class="left">电话</text>
        <view class="right">
          <input type="number" class="value input" placeholder="请输入" name="mobile" :value="info.mobile" v-if="info.examine_status == 2 || !info.id" />
          <view class="value input" v-else>{{ info.mobile }}</view>
        </view>
      </view>
      <view class="row">
        <text class="left">微信号</text>
        <view class="right">
          <input type="text" class="value input" placeholder="请输入" name="wx" :value="info.wx" v-if="info.examine_status == 2 || !info.id" />
          <view class="value input" v-else>{{ info.wx }}</view>
        </view>
      </view>
      <view class="row">
        <text class="left">城市</text>
        <view class="right" @click="openPopup('region')">
          <view class="value">{{ info.province_name ? info.province_name + '-' + info.city_name : '请选择' }}</view>
          <image class="go" src="/static/images/go.png"></image>

          <input type="text" name="province_id" :value="info.province_id" style="display: none">
          <input type="text" name="city_id" :value="info.city_id" style="display: none">
          <input type="text" name="province_name" :value="info.province_name" style="display: none">
          <input type="text" name="city_name" :value="info.city_name" style="display: none">
        </view>
        <input type="text" name="province_id" :value="info.province_id" style="display: none"/>
        <input type="text" name="city_id" :value="info.city_id" style="display: none"/>
      </view>
      <view class="row">
        <text class="left">所在地区</text>
        <view class="right">
          <input type="text" class="value input" placeholder="请输入" name="address" :value="info.address" v-if="info.examine_status == 2 || !info.id" />
          <view class="value input" v-else>{{ info.address }}</view>
        </view>
      </view>
      <view class="row">
        <text class="left">上传证件</text>
        <view class="right">
          <view class="tips">请分别上传身份证正反面照片</view>
        </view>
      </view>

      <view class="upload-box">
        <image mode="aspectFill" @click="upload(1)" :src="card_z > 0 ? card_z_path : '/static/images/card_z.png'"></image>
        <image mode="aspectFill" @click="upload(2)" :src="card_f > 0 ? card_f_path : '/static/images/card_f.png'"></image>
        <input type="text" name="card_z" :value="card_z" style="display: none">
        <input type="text" name="card_f" :value="card_f" style="display: none">
      </view>

      <block v-if="info.examine_status == 2 || !info.id">
        <view class="xy">
          <checkbox :checked="is_agree" @click="doAgree" class="checkbox round color" color="#4297BD" style="background: #FFF"/>
          <view class="span">我已认真阅读并同意
            <navigator class="text" hover-class="none" url="/pages/article/article?type=1">《陪诊员入驻须知》</navigator>
          </view>
        </view>

        <button form-type="submit" class="btn" plain>提交申请</button>
      </block>
    </form>

    <view class="popup-overlay" :class="{ 'show': popup }" @click="closePopup">
      <view class="popup-content" @click.stop>
        <block v-if="popupType === 'work'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="workChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in work" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <block v-if="popupType === 'region'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="regionChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[regionChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import region from '@/static/json/region.json';

export default {
  data() {
    return {
      info: {},
      work: [],
      region: region,
      is_agree: false,
      indicatorStyle: `height: 50px;`,
      popup: false,
      popupType: '', // 控制弹窗类型
      workChooseValue: [0],
      regionChooseValue: [0, 0],
      card_z: 0,
      card_z_path: '',
      card_f: 0,
      card_f_path: '',
    };
  },


  onLoad: function () {
    var user_id = uni.getStorageSync('user_id');
    var empty_info = {
      work: '',
      username: '',
      mobile: '',
      wx: '',
      province_id: 0,
      city_id: 0,
      province_name: '',
      city_name: '',
      address: '',
      card_z: '',
      card_f: ''
    };
    var region = this.region;

    this.$http.post('/index/Api/applyPageData', {user_id}).then(res => {
      var {info, work, work_index} = res.data.data;

      if(info.id > 0){
        this.workChooseValue = [work_index];
        this.regionChooseValue = info.province_name && info.city_name ? this.findRegionIndex(region, info.province_name + '-' + info.city_name) : [0, 0];
        this.card_z = info.card_z;
        this.card_z_path = info.card_z_path;
        this.card_f = info.card_f;
        this.card_f_path = info.card_f_path;
      }

      this.info = info.id > 0 ? info : empty_info;
      this.work = work;
    })
  },

  methods: {
    findRegionIndex(region, str) {
      const [provinceName, cityName] = str.split('-'); // 分割字符串
      const provinceIndex = region.findIndex(item => item.name === provinceName); // 查找省下标
      let cityIndex = -1;

      if (provinceIndex !== -1) {
        cityIndex = region[provinceIndex].city_list.findIndex(city => city.name === cityName); // 查找市下标
      }

      return [provinceIndex, cityIndex]; // 返回省和市的下标
    },

    closePopup: function () {
      this.popupType = '';
      this.popup = false;
    },

    openPopup: function (type) {
      var info = this.info;
      if(info.examine_status == 2 || !info.id){
        this.popupType = type;
        this.popup = true;
      }
    },

    bindChange: function (e) {
      var value = e.detail.value,
        popupType = this.popupType;

      switch (popupType) {
        case 'work':
          this.workChooseValue = value;
          break;
        case 'region':
          this.regionChooseValue = value;
          break;
      }
    },

    doAgree: function () {
      this.is_agree = !this.is_agree;
    },

    confirmChoose: function () {
      var popupType = this.popupType,
        info = this.info;

      switch (popupType) {
        case 'region':
          var region = this.region,
            regionChooseValue = this.regionChooseValue;

          info.province_id = region[regionChooseValue[0]].id;
          info.province_name = region[regionChooseValue[0]].name;
          info.city_id = region[regionChooseValue[0]].city_list[regionChooseValue[1]].id;
          info.city_name = region[regionChooseValue[0]].city_list[regionChooseValue[1]].name;

          break;
        case 'work':
          var work = this.work,
            workChooseValue = this.workChooseValue;

          info.work = work[workChooseValue[0]];

          break;
      }

      this.info = info;
      this.closePopup();
    },

    upload: function (type = 1) {
      var info = this.info;
      if(!(info.examine_status == 2 || !info.id)) return false;

      this.$common.uploadImg(res => {
        if (res.id) {
          uni.showToast({
            title: '上传成功'
          })

          var id = res.id,
            path = res.path;

          if (type == 1) {
            this.card_z = id;
            this.card_z_path = path;
          } else {
            this.card_f = id;
            this.card_f_path = path;
          }
        } else {
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    },

    submit: function (e) {
      var formData = e.detail.value,
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      formData.user_id = uni.getStorageSync('user_id');

      if (!this.is_agree) {
        uni.showToast({
          title: '请阅读并勾选陪诊员入驻须知',
          icon: 'none'
        })
        return;
      }

      uni.showLoading({
        title: '提交申请中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        this.$http.post('/Index/Api/applyUserExtend', formData).then(res => {
          uni.removeStorageSync('timestamp');
          uni.hideLoading();

          if (res.data.result === 1) {
            uni.showToast({
              title: res.data.msg,
              success: () => {
                setTimeout(() => {
                  uni.navigateBack();
                }, 1000)
              }
            })
          } else {
            this.$common.doErrorResult(res);
          }
        })
      }
    },
  },
}
</script>

<style lang="scss">
.container {
  display: flex;
  justify-content: center;

  .form {
    width: 90%;
    border-radius: 20rpx;
    background: #fff;
    padding: 0 20rpx 60rpx 20rpx;
    margin-top: 20rpx;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;
      height: 80rpx;

      .left {
        width: 120rpx;
        flex-shrink: 0; // 防止被挤压
      }

      .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .value {
          margin-right: 10rpx;
          color: $main-blank;
        }

        .input {
          padding: 10rpx 40rpx 10rpx 20rpx;
          text-align: right;
          width: 100%;
          margin-left: 40rpx;
        }

        .tips {
          font-size: 22rpx;
          color: $main-blank;
        }

        .go {
          height: 40rpx;
          width: 40rpx;
        }
      }
    }

    .upload-box {
      display: flex;
      justify-content: space-between;

      image {
        width: 49%;
        height: 210rpx;
      }
    }

    .xy {
      display: flex;
      align-items: center;
      margin-top: 120rpx;
      margin-bottom: 30rpx;

      .span {
        display: flex;
        .text {
          color: $main-color;
        }
      }
    }

    .btn {
      padding: 0;
      border-radius: 50rpx;
      border: 2rpx solid $main-color;
      color: $main-color;
    }
  }

  .popup-overlay {
    position: fixed;
    width: 100vw;
    right: 0;
    bottom: -100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 30;
    transition: bottom 0.3s ease; // 动画效果

    &.show {
      bottom: 0;
      top: 0;
    }

    .popup-content {
      background: white;
      padding: 20px;
      width: 100%;

      .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;

        .confirm-btn {
          color: $main-color;
        }
      }

      .picker-view {
        width: 100%;
        height: 600rpx;
        margin-top: 20rpx;
      }

      .item {
        line-height: 100rpx;
        text-align: center;
      }
    }
  }
}
</style>

